<template>
    <div class="app-container ">
        <div class="customContainer">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select placeholder="选择区域" v-model="formInline.area_id" style="width:100px">
                        <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item class="pull-right">
                    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
                    <!-- <el-tooltip class="item" effect="dark" placement="bottom-end">
                            <div slot="content" style="line-height:20px;">
                                请在打印页左边 "更多设置" 中展开设置缩放（推荐缩放76，具体根据实际大小缩放为准）
                            </div>
                            <i class="el-icon-question"></i>
                        </el-tooltip> -->
                    <!-- <Button v-show="false" id="printGo" type="primary" v-print="'.print'">打印</Button> -->
                </el-form-item>
            </el-form>
            <el-table highlight-current-row show-summary :data="list" border size="small" id="exportContainer">
                <el-table-column align="center" prop="date" label="日期" sortable width="90"></el-table-column>
                <el-table-column align="center" prop="pushAndSweep" label="售币类实收" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'刷卡扣币+扫码上币')"></el-table-column>
                <el-table-column align="center" prop="star_money" label="星星卡实收" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'星星卡实收：星星卡实收=实收星星数x星值')"></el-table-column>
                <el-table-column align="center" prop="month_money" label="月卡实收" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'月卡实收：月卡实收取相应时间段内所有有效期内的月卡办卡总金额/30天')"></el-table-column>
                <el-table-column align="center" prop="six_money" label="6次卡实收" sortable></el-table-column>
                <el-table-column align="center" prop="ten_money" label="10次卡实收" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'10次卡实收：10次卡实收=10次卡游玩次数x单次卡值')"></el-table-column>
                <el-table-column align="center" prop="twelve_money" label="12次卡实收" sortable></el-table-column>
                <el-table-column align="center" prop="twenty_money" label="20次卡实收" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'20次卡实收：20次卡实收=20次卡游玩次数x单次卡值')"></el-table-column>
                <el-table-column align="center" prop="quarter_money" label="季卡实收" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'季卡实收：季卡实收取相应时间段内所有有效期内的季卡办卡总金额/93天')">
                </el-table-column>
                <el-table-column align="center" prop="year_money" label="年卡实收" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'年卡实收：年卡实收取相应时间段内所有有效期内的年卡办卡总金额/365天')">
                </el-table-column>
                <el-table-column align="center" prop="dance_money" label="E舞成名实收" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'E舞成名实收 = 卡游玩次数*单次卡值')">
                </el-table-column>
                <el-table-column align="center" prop="pass_money" label="门票类实收" sortable></el-table-column>
                <el-table-column align="center" prop="pei_money" label="陪同票实收" sortable></el-table-column>
                <el-table-column align="center" prop="order_money" label="其他实收" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'其他实收：其他实收包含换卡、补卡、商品销售、杂项入账、兑币机实收、缴费续期套餐、缴费办卡套餐')">
                </el-table-column>
                <el-table-column align="center" prop="total" label="合计" sortable width="80"></el-table-column>
            </el-table>
            <!--  预览打印 -->
            <!-- <div v-if="is_print" class="printContent" style="position: absolute;z-index: -1;opacity: 0;">
                    <el-table  highlight-current-row style="width:940px;font-size: 16px;border-right: 1px solid #dedede;border-bottom: 1px solid #dedede"
                        class="print" show-summary :data="list" border size="small">
                       <el-table-column align="center" prop="date" label="日期" sortable></el-table-column>
                <el-table-column align="center" prop="pushAndSweep" label="售币类实收" sortable></el-table-column>
                <el-table-column align="center" prop="star_money" label="星星卡实收" sortable></el-table-column>
                <el-table-column align="center" prop="six_money" label="6次卡实收" sortable></el-table-column>
                <el-table-column align="center" prop="ten_money" label="10次卡实收" sortable></el-table-column>
                <el-table-column align="center" prop="twelve_money" label="12次卡实收" sortable></el-table-column>
                <el-table-column align="center" prop="twenty_money" label="20次卡实收" sortable></el-table-column>
                <el-table-column align="center" prop="quarter_money" label="季卡实收" sortable></el-table-column>
                <el-table-column align="center" prop="year_money" label="年卡实收" sortable></el-table-column>
                <el-table-column align="center" prop="pass_money" label="门票类实收" sortable></el-table-column>
                <el-table-column align="center" prop="pei_money" label="陪同票实收" sortable></el-table-column>
                <el-table-column align="center" prop="order_money" label="其他实收" sortable></el-table-column>
                <el-table-column align="center" prop="total" label="合计" sortable></el-table-column>
                    </el-table>
                </div> -->
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getStoreList,
        getAreaList,
    } from "@/api/storage_control/incomeAll_form";
    import { pickerOptionsF, pickerDateF, optionMaxTime, renderHeader } from '@/utils';
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    export default {
        data() {
            return {
                renderHeader,
                listLoading: false,
                is_print: false,
                storeList: null,
                brandList: [],
                areaList: [],
                formInline: {
                    area_id: '',
                    store_id: '',
                    begin_time: '',
                    end_time: '',
                    look_del: '0'
                },
                list: [],
                pickerOptions: pickerOptionsF(-1),
                pickerDate: pickerDateF(-1, -1)
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            // 前端导出
            exportExcel() {
                /* generate workbook object from table */
                var wb = XLSX.utils.table_to_book(document.querySelector('#exportContainer'))
                /* get binary string as output */
                var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${this.$route.meta.title}.xlsx`)
                } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
                return wbout
            },
            //2018/11/29打印功能由于google浏览器引入样式安全的问题，解决方法需要引用自己服务器的样式，无法使用暂时注释
            // printClick() {
            //     this.is_print = true
            //     setTimeout(() => {
            //         document.querySelectorAll('.el-table__body-wrapper')[1].style.maxHeight = "3000px"
            //         document.getElementById("printGo").click();
            //         this.is_print = false
            //     }, 0);
            // },
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 322 }).then(response => {
                    this.storeList = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    this.storeChange();
                });
            },
            storeChange() {
                getAreaList({ sid: this.formInline.store_id }).then(response => {
                    this.areaList = response;
                    if(response.length > 0) {
                        this.formInline.area_id = response[0].id;
                    }
                    
                    if (this.list == null) {
                        this.searchClick();
                    }
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    response.forEach(val => {
                        val.pushAndSweep = ((val.push_money * 1 + val.sweep_money * 1) / 1000000).toFixed(2) * 1;
                        val.order_money = ((val.fill_money * 1 + val.exchange_money * 1 + val.sales_money * 1 + val.sundry_money * 1 + val.internal_money * 1 + val.coin_machine_money * 1 + val.renewal_money * 1 + val.renewal_times_money * 1) / 1000000).toFixed(2) * 1;
                        val.star_money = (val.star_money / 1000000).toFixed(2) * 1;
                        val.ten_money = (val.ten_money / 1000000).toFixed(2) * 1;
                        val.twenty_money = (val.twenty_money / 1000000).toFixed(2) * 1;
                        val.quarter_money = (val.quarter_money / 1000000).toFixed(2) * 1;
                        val.year_money = (val.year_money / 1000000).toFixed(2) * 1;
                        val.month_money = (val.month_money / 1000000).toFixed(2) * 1;
                        val.pass_money = (val.pass_money / 1000000).toFixed(2) * 1;
                        val.pei_money = (val.pei_money / 1000000).toFixed(2) * 1;
                        val.six_money = (val.six_money / 1000000).toFixed(2) * 1;
                        val.twelve_money = (val.twelve_money / 1000000).toFixed(2) * 1;
                        val.dance_money = (val.dance_money / 1000000).toFixed(2) * 1;
                        val.total = (val.pushAndSweep + val.order_money + val.star_money + val.ten_money + val.twenty_money + val.quarter_money + val.year_money + val.dance_money + val.pass_money + val.pei_money + val.six_money + val.twelve_money+val.month_money).toFixed(2) * 1;
                    });
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    };
</script>